<template>
	<div class="login_content">
	  <div class="login_box">
			<!-- 头部图片 -->
			<div class="avatar_box">
				<img src="../assets/logo.png" alt="">
			</div>
			<el-form class="login_form" :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
				<!-- 用户名 -->
			  <el-form-item  prop="username">
			    <el-input placeholder="请输入用户名" prefix-icon="iconfont icon-user" 
					v-model="loginForm.username"></el-input>
			  </el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
				  <el-input placeholder="请输入密码" prefix-icon="iconfont icon-3702mima" 
					v-model="loginForm.password" type="password"></el-input>
				</el-form-item>
				<!-- 按钮 -->
				<el-form-item class="btns">
				    <el-button type="primary" @click="login">登录</el-button>
						<el-button type="info" @click="resetLoginForm">重置</el-button>
				</el-form-item>
				
			</el-form>
		</div>
	</div>
</template>

<script>
	// import {getLogin} from '../network/login.js'
	export default{
		data(){
			return {
				//这个是登录表单的定义对象
				loginForm:{
					username:'admin',
					password:'123456'
				},
				//表单的验证规则对象
				loginFormRules:{
					username:[{required:true,message:'亲输入用户名',trigger:'blur'},
					{max:10,min:3,message:'输入长度在3到10范围',trigger:'blur'}],
					password:[{required:true,message:'亲输入密码',trigger:'blur'}]
				}
			}
		},
	  methods:{
			//表单重置
			resetLoginForm(){
				console.log(this)
				this.$refs.loginFormRef.resetFields()
				
			},
			login(){
				this.$refs.loginFormRef.validate(async valid=>{
					if(!valid) return ;
				await this.$http.post('login',this.loginForm).then(resd=>{
					const {data:res}=resd;
					console.log(res)
					if(res.meta.status!==200) return this.$message.error('用户名或密码错误')
					// this.$message.success('欢迎');
					//将登录之后的token保留到sessionStorage
					window.sessionStorage.setItem('token',res.data.token)
					this.$router.push('/home')
				});
					
				})
				
				// getLogin(this.loginForm.username,this.loginForm.password).then(res=>{
				// 	console.log(res)
				// })
			},
		}
	}
</script>

<style scoped="scoped" lang="less">
	.login_content{
		background-color: #2b4b6b;
		height: 100%;
	}
	.login_box{
		width: 450px;
		height: 300px;
		background-color: white;
		border-radius: 3px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		.avatar_box{
			height: 130px;
			width: 130px;
			border: 1px solid #eee;
			border-radius: 50%;
			padding: 10px;
			box-shadow: 0 0 6px rgba(0,0,0,.5);
			position: absolute;
			left: 50%;
			transform: translate(-50%,-50%);
			 background-color: ghostwhite;
			img{
				width: 100%;
					height: 100%;
					border-radius: 50%;
					background-color: #eee;
			}
		}
	}
	.btns{
		display: flex;
		justify-content: flex-end;
	}
	.login_form{
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
</style>
